<template>
	<div>
		<RouteTitle isBack />
		<a-spin tip="加载中..." :spinning="spinning">
			<div class="card-content bg">
				<a-descriptions title="基础信息">
					<a-descriptions-item v-for="(item, index) in clipDetailObj?.basic"
						:label="item.title">{{item.value}}</a-descriptions-item>
				</a-descriptions>
				<a-divider />
				<a-descriptions v-if="modelName == '图文剪辑' && clipDetailObj?.image_text?.length" title="图文信息"></a-descriptions>
				<div class="content" v-if="modelName == '图文剪辑'">
					<a-card :style="{marginTop:index!=0 ? '10px' :''}" v-for="(item, index) in clipDetailObj?.image_text">
						<template #title>
							场景名称：{{item?.name}}
						</template>
						<div class="image_text_content">
							<div class="left_model">
								<div class="top_image">
									<img :src="item?.image_type_icon" alt="" />
								</div>
								<div class="bottom_text">{{item?.image_type_name}}</div>
							</div>
							
							<div class="right_image">
								<div class="image_title">台词({{item?.text?.length}})</div>
								<div class="text_list">
									<div class="text_item" v-for="(image_item, image_index) in item?.text" :key="image_index">
										<a-tooltip v-if="image_item.main">
										    <template #title>{{image_item.main}}</template>
										    <div class="ellipse_text">{{image_item.main}}</div>
										</a-tooltip>
										<a-tooltip v-if="image_item.deputy">
										    <template #title>{{image_item.deputy}}</template>
										    <div class="ellipse_text" style="font-size: 12px; color: #999;">{{image_item.deputy}}</div>
										</a-tooltip>
									</div>
								</div>
							</div>
							
							<div class="right_image" style="border-right: 0;">
								<div class="image_title">图片素材({{item?.image?.length}})</div>
								<div class="image_list">
									<img @click="previewImage(image_item)" v-for="(image_item, image_index) in item?.image" :src="image_item.url" alt="" />
								</div>
							</div>
						</div>
					</a-card>
				</div>
				<!-- 脚本剪辑 -->
				<a-descriptions v-if="modelName == '脚本剪辑'" title="视频信息"></a-descriptions>
				<div class="content" v-if="modelName == '脚本剪辑'">
					<a-card :style="{marginTop:'10px'}" v-for="(item, index) in 1">
						<template #title>
							脚本名称：{{item}}
						</template>
						<div class="top_con">
							<a-descriptions title="">
							    <a-descriptions-item label="脚本名称">自定义</a-descriptions-item>
							    <a-descriptions-item label="音频配置">青年男声</a-descriptions-item>
							    <a-descriptions-item label="场景音频字幕">开启 <a style="color: #ff5a56; margin-left: 10px;">查看字幕效果</a></a-descriptions-item>
							</a-descriptions>
						</div>
						
						<div class="sence_con">
							<div class="top_container">
								<div class="sence_title">
									<div class="title_item">场景名称：场景一</div>
									<div class="title_item">自动时长</div>
									<div class="title_item">截取方式：随机截取</div>
								</div>
								<div class="right_special">
									特效：阿斯顿、是丢、啊收到、华盛顿、十大
								</div>
							</div>
							
							<div class="bottom_container">
								<div class="image_text_content">
									<div class="right_image" style="width: 25%; border-right: 0;">
										<div class="image_title">台词({{item?.text?.length}})</div>
										<div class="text_list">
											<div class="text_item" v-for="(image_item, image_index) in item?.text" :key="image_index">
												<a-tooltip v-if="image_item.main">
												    <template #title>{{image_item.main}}</template>
												    <div class="ellipse_text">{{image_item.main}}</div>
												</a-tooltip>
												<a-tooltip v-if="image_item.deputy">
												    <template #title>{{image_item.deputy}}</template>
												    <div class="ellipse_text" style="font-size: 12px; color: #999;">{{image_item.deputy}}</div>
												</a-tooltip>
											</div>
										</div>
									</div>
									
									<div class="right_image" style="width: 25%;">
										<div class="image_title">场景音频({{item?.text?.length}})</div>
										<div class="text_list">
											<div class="text_item" v-for="(image_item, image_index) in item?.text" :key="image_index">
												<a-tooltip v-if="image_item.main">
												    <template #title>{{image_item.main}}</template>
												    <div class="ellipse_text">{{image_item.main}}</div>
												</a-tooltip>
												<a-tooltip v-if="image_item.deputy">
												    <template #title>{{image_item.deputy}}</template>
												    <div class="ellipse_text" style="font-size: 12px; color: #999;">{{image_item.deputy}}</div>
												</a-tooltip>
											</div>
										</div>
									</div>
									
									<div class="right_image" style="border-right: 0; width: 50%;">
										<div class="image_title">视频素材({{item?.image?.length}})</div>
										<div class="image_list">
											<img @click="previewImage(image_item)" v-for="(image_item, image_index) in item?.image" :src="image_item.url" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</a-card>
				</div>
				<!-- 智能剪辑 -->
				<a-descriptions v-if="modelName == '智能剪辑'" title="视频信息"></a-descriptions>
				<div class="content" v-if="modelName == '智能剪辑'">
					<a-card :style="{marginTop:index!=0 ? '10px' :''}" v-for="(item, index) in clipDetailObj?.video">
						<template #title>
							场景名称：{{item.name}}
						</template>
						<div class="video_list">
							<div class="video_item" @click="previewClick(video_item)" v-for="(video_item, video_index) in item.resource" :key="video_index">
								<video v-if="video_item.material_type == 'video'" :src="video_item.material_url"></video>
								<img v-if="video_item.material_type == 'image'" :src="video_item.material_url" alt="" />
								<div class="video_name">{{video_item.material_name}}</div>
							</div>
						</div>
						
						<div class="image_text_content">
							<div class="left_model">
								<div class="top_image">
									<img :src="item?.image_type_icon" alt="" />
								</div>
								<div class="bottom_text">{{item?.image_type_name}}</div>
							</div>
							
							<div class="right_image">
								<div class="image_title">台词({{item?.text?.length}})</div>
								<div class="text_list">
									<div class="text_item" v-for="(image_item, image_index) in item?.text" :key="image_index">
										<a-tooltip v-if="image_item.main">
										    <template #title>{{image_item.main}}</template>
										    <div class="ellipse_text">{{image_item.main}}</div>
										</a-tooltip>
										<a-tooltip v-if="image_item.deputy">
										    <template #title>{{image_item.deputy}}</template>
										    <div class="ellipse_text" style="font-size: 12px; color: #999;">{{image_item.deputy}}</div>
										</a-tooltip>
									</div>
								</div>
							</div>
							
							<div class="right_image">
								<div class="image_title">图片素材({{item?.image?.length}})</div>
								<div class="image_list">
									<img @click="previewImage(image_item)" v-for="(image_item, image_index) in item?.image" :src="image_item.url" alt="" />
								</div>
							</div>
						</div>
					</a-card>
				</div>
				<!-- 模板剪辑 -->
				<a-descriptions v-if="modelName == '模板剪辑'" title="视频信息"></a-descriptions>
				<div class="content" v-if="modelName == '模板剪辑'">
					<a-card>
						<template #title>
							模板类型：{{templateInfo?.type}}  所用模板：{{templateInfo?.num}}
						</template>
						<div class="video_list" v-if="templateInfo?.item?.length">
							<div class="video_item" @click="previewClick(video_item)" v-for="(video_item, video_index) in templateInfo?.item" :key="video_index">
								<video :src="video_item.material_url"></video>
								<div class="video_name">{{video_item.material_name}}</div>
							</div>
						</div>
						<div class="no_data" style="width: 100%; min-height: 100px; display: flex; align-items: center; justify-content: center;" v-else>
							暂无数据
						</div>
					</a-card>
					<a-card style="margin-top: 10px;">
						<template #title>
							视频素材（{{videoList?.length}}）
						</template>
						<div class="video_list" v-if="videoList?.length">
							<div class="video_item" @click="previewClick(video_item)" v-for="(video_item, video_index) in videoList" :key="video_index">
								<video v-if="video_item.material_type == 'video'" :src="video_item.material_url"></video>
								<img v-if="video_item.material_type == 'image'" :src="video_item.material_url" alt="" />
								<div class="video_name">{{video_item.material_name}}</div>
							</div>
						</div>
						<div class="no_data" style="width: 100%; min-height: 100px; display: flex; align-items: center; justify-content: center;" v-else>
							暂无数据
						</div>
					</a-card>
				</div>
			</div>
			
			<div class="card-content bg" style="padding-top: 0" v-if="modelName != '图文剪辑'">
				<a-tabs v-model:activeKey="activeKey">
					<a-tab-pane v-for="item in activeList" :key="item.key" :tab="`${item.title}(${item.num})`" />
				</a-tabs>
				<div v-if="activeKey === 'music'">
					<musicCom :materialList="clipDetailObj?.other?.bgm?.item" @preview="previewClick" />
				</div>
				<div v-if="activeKey === 'broad'">
					<broadCom :materialList="clipDetailObj?.other?.audio?.item" @preview="previewClick" />
				</div>
				<div v-if="activeKey === 'word'">
					<wordCom v-if="modelName != '模板剪辑'" :radioType="radioType" :materialList="clipDetailObj?.other?.whole_subtitle_config?.item" />
					<templateWord v-else :radioType="radioType" :materialList="clipDetailObj?.other?.whole_subtitle_config?.item" />
				</div>
				<div v-if="activeKey === 'sticker'">
					<stickerCom :radioType="radioType" :materialList="clipDetailObj?.other?.sticker_config?.item" />
				</div>
				<div v-if="activeKey === 'cover'">
					<coverCom :radioType="radioType" :materialList="clipDetailObj?.other?.cover_config?.item" />
				</div>
			</div>
		</a-spin>

		<!-- 字幕效果 -->
		<SubtitleSettings :visible="visibleSubtitle" @close="visibleSubtitle = false" />

		<!-- 预览弹框 -->
		<PreviewModal :visible="visiblePreview" :title="fileData.name" :url="fileData.url" :type="fileData.type"
			@onCancel="visiblePreview = false" />
	</div>
</template>

<script>
	import {
		reactive,
		toRefs,
		defineComponent,
		onMounted
	} from "vue";
	import SubtitleSettings from "../EditingCenter/modules/bottomSet/modules/subtitleSettings.vue";
	import PreviewModal from "../../../components/PreviewModal/index.vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import request from "../../../common/utils/request";
	import musicCom from './components/musicCom.vue';
	import broadCom from './components/broadCom.vue';
	import wordCom from './components/wordCom.vue';
	import stickerCom from './components/stickerCom.vue';
	import coverCom from './components/coverCom.vue';
	import templateWord from './components/templateWord.vue';
	export default defineComponent({
		name: "ClipDetail",
		components: {
			SubtitleSettings,
			PreviewModal,
			musicCom,
			broadCom,
			wordCom,
			stickerCom,
			coverCom,
			templateWord
		},
		setup() {
			const router = useRouter();
			const route = useRoute();

			const state = reactive({
				count: 0,
				modelName: '',
				clipDetailObj: {},
				visibleSubtitle: false,
				visiblePreview: false,
				fileData: {},
				activeKey: 'music',
				radioType: '9:16',
				templateInfo: {},
				videoList: [],
				activeList: [{
						title: "音乐",
						num: 0,
						key: 'music',
					},
					{
						title: "口播",
						num: 0,
						key: 'broad',
					},
					{
						title: "文字",
						num: 0,
						key: 'word',
					},
					{
						title: "贴纸",
						num: 0,
						key: 'sticker',
					},
					{
						title: "封面",
						num: 0,
						key: 'cover',
					},
				],
				spinning: false,
			});

			const viewSubtitle = () => {
				state.visibleSubtitle = true;
			};

			const previewClick = (item) => {
				state.fileData.type = item.material_type;
				state.fileData.name = item.material_name;
				state.fileData.url = item.material_url
				state.visiblePreview = true;
			};

			const getClipDetail = () => {
				state.spinning = true;
				request
					.get("/work_ai", "/user/shotstack/clip/info", {
						// id: 229,
						id: Number(route.query.detail_id),
					})
					.then((res) => {
						state.spinning = false;
						state.clipDetailObj = res.result
						state.modelName = res.result?.basic.find(item=>item.title == '剪辑模式').value
						state.radioType = res.result?.basic.find(item=>item.title == '比例').value
						state.templateInfo = state.clipDetailObj?.template
						state.templateInfo?.item.map(i=>{
							i.material_type = 'video'
							i.material_name = i.name
						})
						state.videoList = state.clipDetailObj?.video
						state.activeList[0]['num'] = state.clipDetailObj?.other?.bgm?.num
						state.activeList[1]['num'] = state.clipDetailObj?.other?.audio?.num
						state.activeList[2]['num'] = state.clipDetailObj?.other?.whole_subtitle_config?.num
						state.activeList[3]['num'] = state.clipDetailObj?.other?.sticker_config?.num
						state.activeList[4]['num'] = state.clipDetailObj?.other?.cover_config?.num
						if(state.modelName == '模板剪辑'){
							state.activeList.shift()
							state.activeKey = 'broad'
						}
					})
					.catch(() => {
						state.spinning = false;
					});
			};
			
			const previewImage = (item) => {
				state.fileData.type = 'image';
				state.fileData.name = item.name;
				state.fileData.url = item.url
				state.visiblePreview = true
			}

			onMounted(() => {
				getClipDetail();
			});

			return {
				...toRefs(state),
				viewSubtitle,
				previewClick,
				previewImage
			};
		},
	});
</script>

<style lang="less" scoped>
	
	:deep(.ss-descriptions-row > td){
		padding-bottom: 5px !important;
	}
	
	.bg {
		background: rgba(255, 255, 255, 0.4);
	}
	
	.sence_con{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 100%;
		margin-top: 10px;
		.top_container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.sence_title{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 50%;
				.title_item{
					display: flex;
					align-items: center;
					margin-left: 15px;
					&:nth-child(1){
						margin-left: 0px;
					}
				}
			}
			.right_special{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		
		.bottom_container{
			width: 100%;
			margin-top: 10px;
		}
	}
	
	.video_list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		transform: translateX(-10px) translateY(-30px);
		.video_item{
			width: 83px;
			height: 83px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, .9);
			position: relative;
			border-radius: 5px;
			cursor: pointer;
			margin-top: 30px;
			margin-left: 10px;
			video{
				max-width: 80px;
				max-height: 80px;
			}
			img{
				max-width: 80px;
				max-height: 80px;
			}
			.video_name{
				position: absolute;
				width: 80px;
				font-size: 12px;
				color: #333;
				left: 0;
				bottom: -24px;
				display: inline-block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: center;
			}
		}
	}
	
	.card-content {
		width: 100%;
		padding: 20px;
		margin: 20px 0;
		border: 1px solid #f0efef;
		border-radius: 10px;
		.content {
			width: 100%;
		}
	}
	
	.image_text_content{
		width: 100%;
		display: flex;
		.left_model{
			width: 150px;
			min-height: 150px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.top_image{
				img{
					max-height: 100px;
					max-width: 100px;
				}
			}
			.bottom_text{
				
			}
			border-right: 1px solid #eee;
		}
		.right_image{
			width: calc(50% - 90px);
			min-height: 150px;
			margin-left: 20px;
			border-right: 1px solid #eee;
			.image_title{
				height: 30px;
			}
			.text_list{
				display: flex;
				transform: translateX(-10px) translateY(-10px);
				flex-direction: column;
				flex-wrap: wrap;
				width: 100%;
				.text_item{
					width: 100%;
					margin-left: 10px;
					margin-top: 10px;
					background-color: #fafafa;
					padding: 5px 10px;
					.ellipse_text{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: inline-block;
					}
				}
			}
			.image_list{
				display: flex;
				align-items: center;
				transform: translateX(-10px);
				flex-wrap: wrap;
				img{
					max-height: 90px;
					max-width: 90px;
					margin-left: 10px;
					cursor: pointer;
				}
			}
		}
	}
</style>